<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>

  <title>jquery.toggleElements.js - Toggle HTML-Elements with jQuery</title>

  <script type="text/javascript" src="../common/jquery-1.6.2.min.js"></script>
  <script type="text/javascript" src="assets/pluginpage.js"></script>

  <script type="text/javascript" src="assets/jquery.toggleElements.js"></script>
  <link rel="stylesheet" type="text/css" href="assets/toggleElements.css" />
<?php 
$datas = array(1,2,3,4,5,6,7);
$datas1 = array(1,2,3);
$datas2 = array();
$datas3 = array(1,2,3,4);
?>
<script type="text/javascript">
 
    var datas = JSON.parse('<?php echo addslashes(json_encode($datas));?>');
    var datas1 = JSON.parse('<?php echo addslashes(json_encode($datas1));?>');
    var datas2 = JSON.parse('<?php echo addslashes(json_encode($datas2));?>');
    var datas3 = JSON.parse('<?php echo addslashes(json_encode($datas3));?>');

    $(document).ready(function(){
      show();
    });
    
  function show() {
    var table = document.getElementById('table');
    var table1 = document.getElementById('table1');
    var table2 = document.getElementById('table2');
    var table3 = document.getElementById('table3');
    
    removeTableRows(table, 1);
    removeTableRows(table1, 1);
    removeTableRows(table2, 1);
    removeTableRows(table3, 1);
    
    var div = document.getElementById('toggler1');
    var div1 = document.getElementById('toggler2');
    var div2 = document.getElementById('toggler3');
    var div3 = document.getElementById('toggler4');
    
    div.value = datas.length;
    div1.value = datas1.length;
    div2.value = datas2.length;
    div3.value = datas3.length;

    if (datas.length == 0 || div.style.display == 'none') {
      div.className = 'toggler1';
    } else {
      div.className = 'toggler1 opened';
    }

    if (datas1.length == 0 || div1.style.display == 'none') {
      div1.className = 'toggler2';
    } else {
      div1.className = 'toggler2 opened';
    }
    
    if (datas2.length == 0 || div2.style.display == 'none') {
      div2.className = 'toggler3';
    } else {
      div2.className = 'toggler3 opened';
    }
    
    if (datas3.length == 0 || div3.style.display == 'none') {
      div3.className = 'toggler4';
    } else {
      div3.className = 'toggler4 opened';
    }
    
    if (datas.length == 0) {
      removeTableRows(table, 0);
    }
    for (var i = 0, il = datas.length; i < il; i++) {
      var obj = datas[i];
      var tr = table.insertRow(-1);
      tr.className = (i % 2 == 0) ? 'roweven' : 'rowodd'
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
    }
    if (datas1.length == 0) {
      removeTableRows(table1, 0);
    }
    for (var i = 0, il = datas1.length; i < il; i++) {
      var obj = datas1[i];
      var tr = table1.insertRow(-1);
      tr.className = (i % 2 == 0) ? 'roweven' : 'rowodd'
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
    }
    if (datas2.length == 0) {
      removeTableRows(table2, 0);
    }
    for (var i = 0, il = datas2.length; i < il; i++) {
      var obj = datas2[i];
      var tr = table2.insertRow(-1);
      tr.className = (i % 2 == 0) ? 'roweven' : 'rowodd'
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
    }
    if (datas3.length == 0) {
      removeTableRows(table3, 0);
    }
    for (var i = 0, il = datas3.length; i < il; i++) {
      var obj = datas3[i];
      var tr = table3.insertRow(-1);
      tr.className = (i % 2 == 0) ? 'roweven' : 'rowodd'
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
      var td = tr.insertCell(-1);
      td.appendChild(document.createTextNode('line' + i));
    }
    
    $('div #toggler1').toggleElements({lineWidth: 848});
    $('div #toggler2').toggleElements({lineWidth: 874});
    $('div #toggler3').toggleElements({lineWidth: 810});
    $('div #toggler4').toggleElements({lineWidth: 823});
  };

  function change() {
    datas1 = [];
    show();
  }

  function removeChildElements(elem) {
    while (elem && elem.firstChild) {
      elem.removeChild(elem.firstChild);
    }
  };
  
  function removeTableRows(table, rowsToKeep) {
    while (table.rows.length > rowsToKeep) {
      table.deleteRow(table.rows.length - 1);
    }
  };
</script>

</head>
  <body>
    <div class="examples">
      <div class="toggler1 opened" title="Pre Production" id="toggler1">
	        <table width="1000px" height="10px" id="table">
	          <tr class="row_title">
	            <td width="90px">Number</td>
	            <td width="130px">Album Name</td>
	            <td width="90px">Date</td>
	            <td width="150px">Product List</td>
	            <td width="100px">Design By</td>
	            <td width="110px">Status</td>
	            <td width="120px">Send Files</td>
	            <td width="90px">Price</td>
	            <td width="75px">Payment</td>
	            <td width="90px"></td>
	          </tr>
	        </table>
	      </div>
    </div>
    
    <div class="examples">
        <div class="toggler2 opened" title="Production" id="toggler2">
          <table width="1000px" height="10px" id="table1">
            <tr class="row_title">
              <td width="90px">Number</td>
              <td width="130px">Album Name</td>
              <td width="90px">Date</td>
              <td width="150px">Product List</td>
              <td width="100px">Design By</td>
              <td width="110px">Status</td>
              <td width="120px">Send Files</td>
              <td width="90px">Price</td>
              <td width="75px">Payment</td>
              <td width="90px"></td>
            </tr>
          </table>
        </div>
    </div>
    
    <div class="examples">
        <div class="toggler3 opened" title="Production Complete" id = "toggler3">
          <table width="1000px" height="10px" id="table2">
            <tr class="row_title">
              <td width="90px">Number</td>
              <td width="130px">Album Name</td>
              <td width="90px">Date</td>
              <td width="150px">Product List</td>
              <td width="100px">Design By</td>
              <td width="110px">Status</td>
              <td width="120px">Send Files</td>
              <td width="90px">Price</td>
              <td width="75px">Payment</td>
              <td width="90px"></td>
            </tr>
          </table>
        </div>
    </div>
    
    <div class="examples">
        <div class="toggler4 opened" title="Received Products" id="toggler4">
          <table width="1000px" height="10px" id="table3">
            <tr class="row_title">
              <td width="90px">Number</td>
              <td width="130px">Album Name</td>
              <td width="90px">Date</td>
              <td width="150px">Product List</td>
              <td width="100px">Design By</td>
              <td width="110px">Status</td>
              <td width="120px">Send Files</td>
              <td width="90px">Price</td>
              <td width="75px">Payment</td>
              <td width="90px"></td>
            </tr>
          </table>
      </div>
    </div>
    
    <div ><input type="button" value="change" onclick="change();"></input>
  </body>
</html>
